<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">称呼</text>
			<radio-group @change="radioChange">
				<label class="radio"><radio color="#fa436a" value="1" :checked="addressData.gender == 1 ? true : false" />先生</label>
				<label class="radio"><radio color="#fa436a" value="2" :checked="addressData.gender == 2 ? true : false" />女士</label>
			</radio-group>
		</view>
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">电话</text>
			<input class="input" type="text" v-model="addressData.tel" placeholder="收货人联系电话" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">区域</text>
			<xy-cascader
			  valueField="label"
			  action="/v1/region/region/lists"
			  v-model="addressData.city"
			  size="default">
			</xy-cascader>
		</view>
		<view class="row b-b address">
			<text class="tit">地址</text>
			<textarea class="input" v-model="addressData.address" placeholder="详细地址" placeholder-class="placeholder" />
			<text class="xyicon icon-shouhuodizhi"></text>
		</view>
		<view class="row isDefault-row">
			<text class="tit">设为默认</text>
			<switch :checked="addressData.isDefault ? true : false" color="#fa436a" @change="switchChange" />
		</view>
		<button class="add-btn" @click="confirm">提交</button>
		<button class="del-btn m-l-sm m-r-sm" @click="deleteOne">删除</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				addressData: {
					gender: 0,
					name: '',
					tel: '',
					city: '',
					address: '',
					isDefault: 0
				}
			}
		},
		onLoad(option){
			let title = '新增收货地址';
			if(option.type === 'edit'){
				title = '编辑收货地址'
				this.addressData = JSON.parse(option.data);
				this.addressData['city'] = this.addressData['city'].split(", ");
				console.log(this.addressData);
				this.id = this.addressData.id;
				console.log(this.id);
			}
			this.manageType = option.type;
			uni.setNavigationBarTitle({
				title
			})
		},
		methods: {
			radioChange(e){
				this.addressData.gender = e.detail.value;
				console.log(e.detail);
			},
			switchChange(e){
				console.log(e.detail);
				if (e.detail.value == 'checked') {
					this.addressData.isDefault = 1;
				} else {
					this.addressData.isDefault = 0;
				}
			},
			async deleteOne() {
				let res = await this.util.request({
					url: '/v1/user_address/address/delete/' + this.id,
					method: 'DELETE'
				});
				if (res.code == 200) {
					this.util.showToast({
						title: res.msg,
						icon: 'sucess',
						duration: 1000
					});
					uni.navigateBack();
				} else {
					this.util.showToast({
						title: res.msg,
						icon: 'loading',
						duration: 2000
					});
				}
			},
			//提交
			async confirm(){
				let data = this.addressData;
				if(!data.name){
					this.util.showToast({
						title: '请填写收货人姓名',
						icon: 'loading',
						duration: 2000
					});
					return;
				}
				if(!data.tel){
					this.util.showToast({
						title: '请输入正确的手机号码',
						icon: 'loading',
						duration: 2000
					});
					return;
				}
				if(!data.city){
					this.util.showToast({
						title: '请选择城市区域信息',
						icon: 'loading',
						duration: 2000
					});
					return;
				}
				if(!data.address){
					this.util.showToast({
						title: '请填写详细地址',
						icon: 'loading',
						duration: 2000
					});
					return;
				}
				// 提交数据库
				let res1 = '';
				if (this.manageType=='edit') {
					res1 = await this.util.request({
						url: '/v1/user_address/address/edit/' + this.id,
						method: 'put',
						data: {
							gender: this.addressData.gender,
							name: this.addressData.name,
							tel: this.addressData.tel,
							city: this.addressData.city,
							address: this.addressData.address
						}
					});
				} else {
					res1 = await this.util.request({
						url: '/v1/user_address/address/add',
						method: 'post',
						data: {
							gender: this.addressData.gender,
							name: this.addressData.name,
							tel: this.addressData.tel,
							city: this.addressData.city,
							address: this.addressData.address
						}
					});
				}
				if (res1.code != 200) {
					this.util.showToast({
						title: res1.msg,
						icon: 'loading',
						duration: 2000
					});
					return false;
				}
				this.util.showToast({
					title: `地址${this.manageType=='edit' ? '修改': '添加'}成功`,
					icon: 'success',
					duration: 1000
				});

				uni.navigateBack();

				// 获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
				// var pages = getCurrentPages();
				// var prePage = pages[pages.length - 2];
				// prePage.$vm.refreshList(data, this.manageType);
				// setTimeout(()=>{
				// 	this.loadData();
				// }, 800);
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height: 110upx;
		background: #fff;
		&.address {
			height: 120upx;
			textarea {
				height: 90upx;
			}
		}
		.tit {
			flex-shrink: 0;
			width: 120upx;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.input {
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			color: $font-color-light;
		}
	}
	.isDefault-row{
		margin-top: 16upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $uni-color-primary;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>
